<!-- 运动员参赛证 -->
<template>
  <div v-loading="loading" class="athletes">
    <div class="box">
      <div ref="competition" class="competition" :style="form.backgroundStyle">
        <div ref="title" class="title" v-show="form.title.isShow == '1'">我的赛事名称</div>
        <div>
          <div v-show="form.people.isShow == '1'" ref="people" class="img_box">
            <img src="@/assets/images/people_default.png" alt="">
          </div>
          <div>
            <div v-show="form.logo.isShow == '1'" ref="logo" class="logo_box">
              <img src="@/assets/images/logo/white_logo.png" alt="">
            </div>
            <div ref="type" class="type_box">
              <span style="float:left;">{{ activeItem.code.substring(0, 1) }}</span>
              <span style="float:right;">{{ activeItem.value }}</span>
            </div>
          </div>
          <div>
            <div ref="name" class="name">我的名字</div>
            <div ref="group" class="group">我所在的团体名称</div>
          </div>
          <div ref="project" class="project">
            <div v-for="index of 3" :key="index">
              <span>{{ projectExample }}</span>
            </div>
          </div>
          <div v-show="form.qr.isShow == '1'" ref="qr" class="qr">
            <div :id="'qrcode' + activeItem.code" class="qr_code" />
          </div>
          <div ref="address" class="address">比赛地址：XX省XX市XXXX地点</div>
        </div>
      </div>
      <div v-if="!isLeague">
        <el-upload
          class="upload_file"
          :action="importAction"
          :http-request="importSetting"
          :auto-upload="true"
          :show-file-list="false"
          accept=".json"
        >
          <el-button :loading="importLoading" style="width: 200px" type="primary" size="small">导入</el-button>
        </el-upload>
        <!-- <el-button :loading="importLoading" style="width: 48%" type="primary" size="small" @click="importSetting">导入</el-button> -->
        <el-button :loading="exportLoading" style="width: 48%" type="primary" size="small" @click="exportSetting">导出</el-button>
      </div>
    </div>
    <div class="control">
      <div class="export_box gl_padding_15">
        <p class="gl_mb_10 gl_mr_15 gl_dis_ib">
          <span>选择机构：</span>
          <el-select v-model="delegationId" placeholder="请选择" size="mini">
            <el-option v-if="isHasALL" label="全部" value="ALL" />
            <el-option v-for="item in mechanisms" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </p>
        <el-button v-if="delegationId !== 'ALL'" :loading="buLoading" type="primary" size="mini" @click="exportTemplate()">按机构生成参赛证</el-button>
        <el-button v-else :loading="buLoading" type="warning" size="mini" @click="exportAll()">导出全部参赛证</el-button>
      </div>
      <div v-if="!isLeague">
        <el-scrollbar wrap-class="scrollbar-wrapper gl_mt_20" style="width: 610px; height: 620px">
          <div style="width: 590px">
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">更换背景图：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetImage">恢复原图</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-upload
                  class="upload_img"
                  :action="action"
                  :before-upload="beforeUpload"
                  :http-request="upload"
                  :auto-upload="true"
                  :show-file-list="false"
                  accept=".jpg,.png,.jpeg"
                >
                  <el-button :loading="uploadLoading" type="text" size="mini">+更换背景图</el-button>
                </el-upload>
                <span class="gl_fs_12 gl_color_grey">建议分辨率 1000 x 1479(宽x高)，只能上传jpg/png文件，且不超过800kb</span>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">标题设置：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetTitle">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字体</span>
                    <el-select v-model="form.title.ff" size="mini" style="width: 100px" @change="changeFf('title')">
                      <el-option v-for="item in ffList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字号</span>
                    <el-select v-model="form.title.fs" size="mini" style="width: 100px" @change="changeFs('title')">
                      <el-option v-for="item in fsList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">颜色</span>
                    <el-color-picker v-model="form.title.color" class="gl_middle" size="mini" @active-change="changeTitleColor" @change="saveColor('title')" />
                  </el-col>
                  <el-col :span="5" style="margin-top: 4px">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">加粗</span>
                    <el-checkbox v-model="form.title.fw" class="gl_middle" size="small" @change="changeFw('title')" />
                  </el-col>
                </el-row>
                <el-row :gutter="15" class="gl_mt_15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.title.X" controls-position="right" :disabled="true" :min="0" size="mini" style="width: 100px" @change="changeX('title')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.title.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('title')" />
                  </el-col>
                  <el-col :span="8" class="line_height_28">
                    <el-radio-group v-model="form.title.isShow">
                      <el-radio :label="'1'">显示</el-radio>
                      <el-radio :label="'0'">隐藏</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">名字：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetName">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字体</span>
                    <el-select v-model="form.name.ff" size="mini" style="width: 100px" @change="changeFf('name')">
                      <el-option v-for="item in ffList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字号</span>
                    <el-select v-model="form.name.fs" size="mini" style="width: 100px" @change="changeFs('name')">
                      <el-option v-for="item in fsList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">颜色</span>
                    <el-color-picker v-model="form.name.color" class="gl_middle" size="mini" @active-change="changeNameColor" @change="saveColor('name')" />
                  </el-col>
                  <el-col :span="5" style="margin-top: 4px">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">加粗</span>
                    <el-checkbox v-model="form.name.fw" class="gl_middle" size="small" @change="changeFw('name')" />
                  </el-col>
                </el-row>
                <el-row :gutter="15" class="gl_mt_15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.name.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('name')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.name.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('name')" />
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">团体名称：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetGroup">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字体</span>
                    <el-select v-model="form.group.ff" size="mini" style="width: 100px" @change="changeFf('group')">
                      <el-option v-for="item in ffList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字号</span>
                    <el-select v-model="form.group.fs" size="mini" style="width: 100px" @change="changeFs('group')">
                      <el-option v-for="item in fsList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">颜色</span>
                    <el-color-picker v-model="form.group.color" class="gl_middle" size="mini" @active-change="changeGroupColor" @change="saveColor('group')" />
                  </el-col>
                  <el-col :span="5" style="margin-top: 4px">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">加粗</span>
                    <el-checkbox v-model="form.group.fw" class="gl_middle" size="small" @change="changeFw('group')" />
                  </el-col>
                </el-row>
                <el-row :gutter="15" class="gl_mt_15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.group.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('group')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.group.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('group')" />
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">报项：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetProject">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字体</span>
                    <el-select v-model="form.project.ff" size="mini" style="width: 100px" @change="changeFf('project')">
                      <el-option v-for="item in ffList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字号</span>
                    <el-select v-model="form.project.fs" size="mini" style="width: 100px" @change="changeFs('project')">
                      <el-option v-for="item in fsList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">颜色</span>
                    <el-color-picker v-model="form.project.color" class="gl_middle" size="mini" @active-change="changeProjectColor" @change="saveColor('project')" />
                  </el-col>
                  <el-col :span="5" style="margin-top: 4px">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">加粗</span>
                    <el-checkbox v-model="form.project.fw" class="gl_middle" size="small" @change="changeFw('project')" />
                  </el-col>
                </el-row>
                <el-row :gutter="15" class="gl_mt_15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.project.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('project')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.project.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('project')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">字符数</span>
                    <el-input-number v-model="form.project.nameLength" controls-position="right" size="mini" :min="0" :max="50" :precision="0" style="width: 100px" @change="changeCharacter" />
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">比赛地址：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetAddress">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字体</span>
                    <el-select v-model="form.address.ff" size="mini" style="width: 100px" @change="changeFf('address')">
                      <el-option v-for="item in ffList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5">字号</span>
                    <el-select v-model="form.address.fs" size="mini" style="width: 100px" @change="changeFs('address')">
                      <el-option v-for="item in fsList" :key="item" :label="item" :value="item" />
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">颜色</span>
                    <el-color-picker v-model="form.address.color" class="gl_middle" size="mini" @active-change="changeAddressColor" @change="saveColor('address')" />
                  </el-col>
                  <el-col :span="5" style="margin-top: 4px">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">加粗</span>
                    <el-checkbox v-model="form.address.fw" class="gl_middle" size="small" @change="changeFw('address')" />
                  </el-col>
                </el-row>
                <el-row :gutter="15" class="gl_mt_15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.address.X" controls-position="right" :disabled="true" :min="0" size="mini" style="width: 100px" @change="changeX('address')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.address.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('address')" />
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">运动员框：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetType">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="4">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">颜色</span>
                    <el-color-picker v-model="form.type.color" class="gl_middle" size="mini" @active-change="changeTypeColor" @change="saveColor('type')" />
                  </el-col>
                  <el-col :span="4">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">背景</span>
                    <el-color-picker v-model="form.type.bgColor" class="gl_middle" size="mini" @active-change="changeTypeBgColor" @change="saveTypeBgColor" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.type.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('type')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.type.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('type')" />
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">二维码：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetQr">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.qr.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('qr')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.qr.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('qr')" />
                  </el-col>
                  <el-col :span="8" class="line_height_28">
                    <el-radio-group v-model="form.qr.isShow">
                      <el-radio :label="'1'">显示</el-radio>
                      <el-radio :label="'0'">隐藏</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_mt_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">LOGO：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetLOGO">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.logo.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('logo')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.logo.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('logo')" />
                  </el-col>
                  <el-col :span="8" class="line_height_28">
                    <el-radio-group v-model="form.logo.isShow">
                      <el-radio :label="'1'">显示</el-radio>
                      <el-radio :label="'0'">隐藏</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="gl_my_10">
              <el-row type="flex" justify="space-between">
                <el-col class="title_name gl_ml_20 gl_mb_5" :span="6">头像：</el-col>
                <el-col class="gl_color_error gl_pointer gl_fs_14 gl_mr_20" align="right" :span="4">
                  <p @click="resetPeople">复位</p>
                </el-col>
              </el-row>
              <div class="box">
                <el-row :gutter="15">
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">X 轴</span>
                    <el-input-number v-model="form.people.X" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeX('people')" />
                  </el-col>
                  <el-col :span="7">
                    <span class="gl_fs_14 gl_pr_5 gl_middle">Y 轴</span>
                    <el-input-number v-model="form.people.Y" controls-position="right" size="mini" :min="0" style="width: 100px" @change="changeY('people')" />
                  </el-col>
                  <el-col :span="8" class="line_height_28">
                    <el-radio-group v-model="form.people.isShow">
                      <el-radio :label="'1'">显示</el-radio>
                      <el-radio :label="'0'">隐藏</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div class="gl_my_15">
          <el-button :loading="saveLoading" style="width: 15%" type="success" size="mini" @click="saveSetting">保存</el-button>
          <el-button :loading="resetLoading" style="width: 15%" type="warning" size="mini" @click="recovery">复位</el-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import { mapState } from 'vuex';
import { getToken } from '@/lib/auth';
import axios from 'axios';
import { api_GET_DownLoadFileAddHeader, api_Post_UploadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  api_GET_EventsManagementEntryDelegationListByCompRegisterTagCompetitionId, // 获取机构
  api_GET_EventsManagementReportTemplateSettingDefaultEntryCardSetting, // 获取参赛证默认设置
  api_GET_EventsManagementReportTemplateSettingEntryCardSettingCompetitionId, // 获取指定赛事的参赛证设置
  api_PUT_EventsManagementReportTemplateSettingEntryCardSetting // 更新赛事参赛证设置
} from '@/extend/api/gameswaggerApi/app.js';
// import {
//   api_POST_IdImportEntryCardReportSetting // 导入
// } from '@/extend/api/gameswaggerApi/common.js';
import {
  SiSTKWEventsManagementEmCreateReportDto
} from '@/lib/form/game/swaggerForm';
export default {
  name: 'Athletes',
  props: {
    activeItem: {
      type: Object,
      default() {
        return {
          code: '',
          value: ''
        };
      }
    }
  },
  data() {
    return {
      loading: false,
      buLoading: false,
      projectExample: '我的报项，例：竞技少儿组45...',
      projectExampleCopy: '我的报项，例：竞技少儿组45KG',
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`,
      importAction: `${process.env.VUE_APP_API_SWAGGER_GAME}/${this.$route.params.id}/import-entry-card-report-setting`,
      tokenInfo: getToken(),
      baseUrl: WEB_CONFIG.VUE_APP_API_CERTIFICAT,
      SiSTKWEventsManagementEmCreateReportDto: new SiSTKWEventsManagementEmCreateReportDto(),
      mechanisms: [], // 机构下拉列表
      delegationId: 'ALL',
      isHasALL: true, // 是否显示全部选项
      file: '', // 上传的图片
      fileImg: '', // 暂存的背景图片路径
      fsList: [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 28, 36, 72], // 字号
      ffList: [
        {
          name: '宋体'
        },
        {
          name: '微软雅黑'
        },
        {
          name: '黑体'
        }
      ], // 字体
      defaultForm: {}, // 参赛证默认配置
      form: {
        background: {},
        title: {},
        name: {},
        group: {},
        project: {},
        address: {},
        type: {},
        qr: {},
        logo: {},
        people: {}
      }, // 参赛证配置
      uploadLoading: false,
      saveLoading: false,
      resetLoading: false,
      importLoading: false,
      exportLoading: false,
      isLeague: false // 是否从联赛过来
    };
  },
  computed: {
    ...mapState({
      tenantId: state => state.user.tenantId
    })
  },
  created() {
    this.getGroup();
    this.getDefaultSetting();
    this.getSetting();
    this.isLeague = this.$route.query.isLeague;
  },
  mounted() {
    this.createdQrCode();
  },
  methods: {
    // 获取机构列表
    getGroup() {
      var that = this;
      const params = {
        registerTagTypeCode: that.activeItem.code
      };
      api_GET_EventsManagementEntryDelegationListByCompRegisterTagCompetitionId(that.$route.params.id, params).then(res => {
        that.mechanisms = res;
        if (!that.mechanisms.length > 0) {
          that.delegationId = '';
          that.isHasALL = false;
        }
      });
    },
    // 生成二维码
    createdQrCode() {
      new QRCode('qrcode' + this.activeItem.code, {
        width: 130,
        height: 130,
        text: '二维码'
      });
    },
    // 按机构导出参赛证
    exportTemplate() {
      if (this.delegationId === '') {
        this.$message({ type: 'warning', message: '请选择机构！' });
        return;
      }
      this.buLoading = true;
      const Delegation = this.mechanisms.filter(item => {
        return item.id === this.delegationId;
      });
      const tempUrl = `${WEB_CONFIG.VUE_APP_SWAGGER_GAME_BASE}/api/app/events-management/report/entry-cards`;
      const params = {
        ReportName: 'EntryPassAthlete',
        Format: 'PDF',
        ExportAll: false,
        CompetitionId: this.$route.params.id,
        FileDownloadName: Delegation[0].name,
        TagTypeCode: this.activeItem.code,
        DelegationId: this.delegationId,
        PagePath: this.baseUrl
      };
      const tenantId = this.tenantId ? this.tenantId : '';
      const url = `${tempUrl}?ReportName=${params.ReportName}&Format=${params.Format}&ExportAll=${params.ExportAll}&CompetitionId=${params.CompetitionId}&FileDownloadName=${params.FileDownloadName}.pdf&TagTypeCode=${params.TagTypeCode}&DelegationId=${params.DelegationId}&__tenant=${tenantId}&PagePath=${params.PagePath}`;
      const a = document.createElement('a');
      const event = new MouseEvent('click');
      a.download = params.FileDownloadName;
      a.href = url;
      a.target = '_blank';
      a.dispatchEvent(event);
      this.buLoading = false;
    },
    exportAll() {
      this.buLoading = true;
      const tempUrl = `${WEB_CONFIG.VUE_APP_SWAGGER_GAME_BASE}/api/app/events-management/report/entry-cards`;
      const params = {
        ReportName: 'EntryPassAthlete',
        Format: 'PDF',
        ExportAll: true,
        CompetitionId: this.$route.params.id,
        FileDownloadName: '参赛证',
        TagTypeCode: this.activeItem.code,
        PagePath: this.baseUrl
      };
      const tenantId = this.tenantId ? this.tenantId : '';
      const url = `${tempUrl}?ReportName=${params.ReportName}&Format=${params.Format}&ExportAll=${params.ExportAll}&CompetitionId=${params.CompetitionId}&FileDownloadName=${params.FileDownloadName}.zip&TagTypeCode=${params.TagTypeCode}&__tenant=${tenantId}&PagePath=${params.PagePath}`;
      const a = document.createElement('a');
      const event = new MouseEvent('click');
      a.download = params.FileDownloadName;
      a.href = url;
      a.target = '_blank';
      a.dispatchEvent(event);
      this.buLoading = false;
    },
    /**
      *参赛证样式设置
    */
    // 获取参赛证默认设置
    getDefaultSetting() {
      var that = this;
      api_GET_EventsManagementReportTemplateSettingDefaultEntryCardSetting().then(res => {
        that.defaultForm = that.restructure(res);
      }).catch(error => {
        that.$message({ type: 'error', message: '获取参赛证默认设置失败 ' + error.error.message });
      });
    },
    // 获取本赛事参赛证设置
    getSetting() {
      var that = this;
      that.loading = true;
      api_GET_EventsManagementReportTemplateSettingEntryCardSettingCompetitionId(that.$route.params.id).then(res => {
        that.form = that.restructure(res);
        that.changeEntryCard(that.form);
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: '获取参赛证默认设置失败 ' + error.error.message });
      });
    },
    changeEntryCard(data) {
      this.$refs.competition.style.backgroundImage = 'url(' + this.getStaticFileUrl(data.backgroundUrl.pageBackgroundImage) + ')';
      // title
      this.changeFs('title');
      this.changeFf('title');
      this.changeFw('title');
      this.changeY('title');
      this.$refs.title.style.color = data.title.color;
      // name
      this.changeFs('name');
      this.changeFf('name');
      this.changeFw('name');
      this.changeX('name');
      this.changeY('name');
      this.$refs.name.style.color = data.name.color;
      // group
      this.changeFs('group');
      this.changeFf('group');
      this.changeFw('group');
      this.changeX('group');
      this.changeY('group');
      this.$refs.group.style.color = data.group.color;
      // project
      this.changeFs('project');
      this.changeFf('project');
      this.changeFw('project');
      this.changeX('project');
      this.changeY('project');
      this.changeCharacter(data.project.nameLength);
      this.$refs.project.style.color = data.project.color;
      // address
      this.changeFs('address');
      this.changeFf('address');
      this.changeFw('address');
      this.changeY('address');
      this.$refs.address.style.color = data.address.color;
      // type
      this.changeX('type');
      this.changeY('type');
      this.$refs.type.style.color = data.type.color;
      this.$refs.type.style.backgroundColor = data.type.bgColor;
      // qr
      this.changeX('qr');
      this.changeY('qr');
      // logo
      this.changeX('logo');
      this.changeY('logo');
      // people
      this.changeX('people');
      this.changeY('people');
    },
    // 添加隐藏功能
    // 重构配置格式
    restructure(data) {
      const form = {};
      form.backgroundStyle = {
        backgroundImage: 'url(' + this.getStaticFileUrl(data.pageBackgroundImage) + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      };
      form.backgroundUrl = {
        pageBackgroundImage: data.pageBackgroundImage
      };
      form.title = {
        fs: data.titleFontSize,
        ff: data.titleFontFamilyName,
        color: data.titleTextColor,
        fw: data.titleFontStyle === 'Bold',
        X: data.titlePosX,
        Y: data.titlePosY,
        isShow: data.titleIsDisplay
      };
      form.name = {
        fs: data.nameFontSize,
        ff: data.nameFontFamilyName,
        color: data.nameTextColor,
        fw: data.nameFontStyle === 'Bold',
        X: data.namePosX,
        Y: data.namePosY
      };
      form.group = {
        fs: data.delegationFontSize,
        ff: data.delegationFontFamilyName,
        color: data.delegationTextColor,
        fw: data.delegationFontStyle === 'Bold',
        X: data.delegationPosX,
        Y: data.delegationPosY
      };
      form.project = {
        fs: data.entryFontSize,
        ff: data.entryFontFamilyName,
        color: data.entryTextColor,
        fw: data.entryFontStyle === 'Bold',
        X: data.entryPosX,
        Y: data.entryPosY,
        nameLength: data.entryNameLength
      };
      form.address = {
        fs: data.addressFontSize,
        ff: data.addressFontFamilyName,
        color: data.addressTextColor,
        fw: data.addressFontStyle === 'Bold',
        X: data.addressPosX,
        Y: data.addressPosY
      };
      form.type = {
        color: data.registerTextColor,
        bgColor: data.registerBackgroundColor,
        X: data.registerPosX,
        Y: data.registerPosY
      };
      form.qr = {
        X: data.qrCodePosX,
        Y: data.qrCodePosY,
        isShow: data.qrCodeIsDisplay
      };
      form.logo = {
        X: data.logoPosX,
        Y: data.logoPosY,
        isShow: data.logoIsDisplay
      };
      form.people = {
        X: data.avatarPosX,
        Y: data.avatarPosY,
        isShow: data.avatarIsDisplay
      };
      return form;
    },
    // 上传图片限制
    check(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt2M = file.size / 1024 < 800;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG或者PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 800kb!');
      }
      return isJPG && isLt2M;
    },
    beforeUpload(file) {
      const checkData = this.check(file);
      if (checkData) {
        this.file = file;
      } else {
        return false;
      }
    },
    // 上传图片
    upload() {
      var that = this;
      this.uploadLoading = true;
      return new Promise((resolve, reject) => {
        if (!that.file) reject(new Error());
        const form = new FormData();
        form.append('formFile', that.file);
        that.uploadApi(that.action, form).then(res => {
          if (res.status === 200) {
            that.fileImg = res.data.tempUrl;
            that.uploadLoading = false;
            that.$refs.competition.style.backgroundImage = 'url(' + that.getStaticFileUrl(that.fileImg) + ')';
            resolve(res.data);
          } else {
            that.fileImg = '';
            that.uploadLoading = false;
            reject(res.data);
          }
        });
      });
    },
    // 上传图片的api
    uploadApi(url, file) {
      const config = {
        headers: {
          Authorization: 'Bearer ' + this.tokenInfo
        }
      };
      return axios.post(url, file, config);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 恢复原图
    resetImage() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.backgroundUrl.pageBackgroundImage = defaultForm.backgroundUrl.pageBackgroundImage;
      this.$refs.competition.style.backgroundImage = 'url(' + this.getStaticFileUrl(this.form.backgroundUrl.pageBackgroundImage) + ')';
      this.fileImg = '';
    },
    // 改变字体大小
    changeFs(code) {
      this.$refs[code].style.fontSize = this.form[code].fs + 'px';
    },
    // 改变字体
    changeFf(code) {
      let fontFamily = '';
      if (this.form[code].ff === '黑体') {
        fontFamily = 'SimHei';
      } else if (this.form[code].ff === '微软雅黑') {
        fontFamily = 'Microsoft YaHei, 微软雅黑';
      } else if (this.form[code].ff === '宋体') {
        fontFamily = 'SimSun';
      }
      this.$refs[code].style.fontFamily = fontFamily;
    },
    // 是否加粗
    changeFw(code) {
      this.$refs[code].style.fontWeight = this.form[code].fw ? 'bold' : 'normal';
    },
    // 颜色选择器调用清空 or 确定时触发,默认为白色时使用此方法
    saveColor(code) {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      if (this.form[code].color === '' || this.form[code].color === null) {
        this.form[code].color = defaultForm[code].color;
        this.$refs[code].style.color = this.form[code].color;
      } else {
        this.$refs[code].style.color = this.form[code].color;
      }
    },
    // 改变X轴坐标
    changeX(code) {
      const X = this.form[code].X;
      this.$refs[code].style.left = X + 'px';
    },
    // 改变Y轴坐标
    changeY(code) {
      const Y = this.form[code].Y;
      this.$refs[code].style.top = Y + 'px';
    },
    // 复位
    changeReset(code) {
      this.$refs[code].style.fontSize = this.form[code].fs + 'px';
      this.$refs[code].style.fontFamily = this.form[code].ff;
      this.$refs[code].style.color = this.form[code].color;
      this.$refs[code].style.fontWeight = this.form[code].fw ? 'bold' : 'normal';
      const Y = this.form[code].Y;
      this.$refs[code].style.top = Y + 'px';
      if (code !== 'title' && code !== 'address') {
        const X = this.form[code].X;
        this.$refs[code].style.left = X + 'px';
      }
      if (code === 'project') {
        this.changeCharacter(this.form.project.nameLength);
      }
    },
    /**
      *标题设置
    */
    // 选取颜色时触发
    changeTitleColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.title.style.color = hexStr;
      this.form.title.color = hexStr;
    },
    // 复位
    resetTitle() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.title = defaultForm.title;
      this.changeReset('title');
    },
    /**
      *名字
    */
    // 选取颜色时触发
    changeNameColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.name.style.color = hexStr;
      this.form.name.color = hexStr;
    },
    // 复位
    resetName() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.name = defaultForm.name;
      this.changeReset('name');
    },
    /**
      *团体名称
    */
    // 选取颜色时触发
    changeGroupColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.group.style.color = hexStr;
      this.form.group.color = hexStr;
    },
    // 复位
    resetGroup() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.group = defaultForm.group;
      this.changeReset('group');
    },
    /**
      *报项
    */
    // 选取颜色时触发
    changeProjectColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.project.style.color = hexStr;
      this.form.project.color = hexStr;
    },
    // 报项显示字数
    changeCharacter(val) {
      if (val !== 0) {
        if (val < 16) {
          this.projectExample = this.projectExampleCopy.substr(0, val) + '...';
        } else {
          this.projectExample = this.projectExampleCopy;
        }
      } else {
        this.projectExample = '';
      }
    },
    // 复位
    resetProject() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.project = defaultForm.project;
      this.changeReset('project');
    },
    /**
      *赛事地址
    */
    // 选取颜色时触发
    changeAddressColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.address.style.color = hexStr;
      this.form.address.color = hexStr;
    },
    // 复位
    resetAddress() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.address = defaultForm.address;
      this.changeReset('address');
    },
    /**
      *运动员框
    */
    // 选取颜色时触发，字体颜色
    changeTypeColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.type.style.color = hexStr;
      this.form.type.color = hexStr;
    },
    // 选取颜色时触发，背景颜色
    changeTypeBgColor(val) {
      const reg = /[0-9]\d+/g;
      const getArr = val.match(reg);
      const hexStr = '#' + ((getArr[0] << 16) | (getArr[1] << 8) | getArr[2]).toString(16);
      this.$refs.type.style.backgroundColor = hexStr;
      this.form.type.bgColor = hexStr;
    },
    // 颜色选择器调用清空 or 确定时触发，背景颜色
    saveTypeBgColor() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      if (this.form.type.bgColor === '' || this.form.type.bgColor === null) {
        this.form.type.bgColor = defaultForm.type.bgColor;
        this.$refs.type.style.backgroundColor = this.form.type.bgColor;
      } else {
        this.$refs.type.style.backgroundColor = this.form.type.bgColor;
      }
    },
    // 复位
    resetType() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.type = defaultForm.type;
      this.$refs.type.style.color = this.form.type.color;
      this.$refs.type.style.backgroundColor = this.form.type.bgColor;
      const Y = this.form.type.Y;
      this.$refs.type.style.top = Y + 'px';
      const X = this.form.type.X;
      this.$refs.type.style.left = X + 'px';
    },
    /**
      *二维码
    */
    // 复位
    resetQr() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.qr = defaultForm.qr;
      const Y = this.form.qr.Y;
      this.$refs.qr.style.top = Y + 'px';
      const X = this.form.qr.X;
      this.$refs.qr.style.left = X + 'px';
    },
    /**
      *LOGO
    */
    // 复位
    resetLOGO() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.logo = defaultForm.logo;
      const Y = this.form.logo.Y;
      this.$refs.logo.style.top = Y + 'px';
      const X = this.form.logo.X;
      this.$refs.logo.style.left = X + 'px';
    },
    /**
      *头像图片
    */
    // 复位
    resetPeople() {
      const defaultForm = JSON.parse(JSON.stringify(this.defaultForm));
      this.form.people = defaultForm.people;
      const Y = this.form.people.Y;
      this.$refs.people.style.top = Y + 'px';
      const X = this.form.people.X;
      this.$refs.people.style.left = X + 'px';
    },
    // 构造参数格式
    sendRestructure(data) {
      const form = {
        width: '394',
        height: '591',
        pageBackgroundImage: this.fileImg ? this.fileImg : data.backgroundUrl.pageBackgroundImage,
        // title
        titleFontFamilyName: data.title.ff,
        titleFontSize: data.title.fs,
        titleFontStyle: data.title.fw ? 'Bold' : 'Regular',
        titlePosX: data.title.X,
        titlePosY: data.title.Y,
        titleTextColor: data.title.color,
        titleIsDisplay: data.title.isShow,
        // name
        nameFontFamilyName: data.name.ff,
        nameFontSize: data.name.fs,
        nameFontStyle: data.name.fw ? 'Bold' : 'Regular',
        namePosX: data.name.X,
        namePosY: data.name.Y,
        nameTextColor: data.name.color,
        // group
        delegationFontFamilyName: data.group.ff,
        delegationFontSize: data.group.fs,
        delegationFontStyle: data.group.fw ? 'Bold' : 'Regular',
        delegationPosX: data.group.X,
        delegationPosY: data.group.Y,
        delegationTextColor: data.group.color,
        // project
        entryFontFamilyName: data.project.ff,
        entryFontSize: data.project.fs,
        entryFontStyle: data.project.fw ? 'Bold' : 'Regular',
        entryPosX: data.project.X,
        entryPosY: data.project.Y,
        entryTextColor: data.project.color,
        entryNameLength: data.project.nameLength,
        // address
        addressFontFamilyName: data.address.ff,
        addressFontSize: data.address.fs,
        addressFontStyle: data.address.fw ? 'Bold' : 'Regular',
        addressPosX: data.address.X,
        addressPosY: data.address.Y,
        addressTextColor: data.address.color,
        // type
        registerBackgroundColor: data.type.bgColor,
        registerFontFamilyName: '黑体',
        registerFontSize: '28',
        registerFontStyle: 'Regular',
        registerPosX: data.type.X,
        registerPosY: data.type.Y,
        registerTextColor: data.type.color,
        registerWidth: '234',
        registerHeight: '59',
        // qr
        qrCodePosX: data.qr.X,
        qrCodePosY: data.qr.Y,
        qrCodeWidth: '130',
        qrCodeHeight: '130',
        qrCodeIsDisplay: data.qr.isShow,
        // logo
        logoPosX: data.logo.X,
        logoPosY: data.logo.Y,
        logoWidth: '133',
        logoHeight: '98',
        logoIsDisplay: data.logo.isShow,
        // people
        avatarPosX: data.people.X,
        avatarPosY: data.people.Y,
        avatarWidth: '100',
        avatarHeight: '126',
        avatarIsDisplay: data.people.isShow
      };
      return form;
    },
    // 保存参赛证配置
    saveSetting() {
      var that = this;
      that.saveLoading = true;
      const params = {
        competitionId: that.$route.params.id,
        setting: {}
      };
      params.setting = that.sendRestructure(that.form);
      api_PUT_EventsManagementReportTemplateSettingEntryCardSetting(params).then(res => {
        that.$message({ type: 'success', message: '保存设置成功' });
        that.getSetting();
        that.saveLoading = false;
      }).catch(error => {
        that.saveLoading = false;
        that.$message({ type: 'error', message: '保存设置失败 ' + error.error.message });
      });
    },
    // 恢复参赛证默认设置
    recovery() {
      var that = this;
      that.resetLoading = true;
      const params = {
        competitionId: that.$route.params.id,
        setting: {}
      };
      params.setting = that.sendRestructure(that.defaultForm);
      params.setting.pageBackgroundImage = that.defaultForm.backgroundUrl.pageBackgroundImage;
      api_PUT_EventsManagementReportTemplateSettingEntryCardSetting(params).then(res => {
        that.$message({ type: 'success', message: '恢复默认设置成功' });
        that.getSetting();
        that.resetLoading = false;
      }).catch(error => {
        that.resetLoading = false;
        that.$message({ type: 'error', message: '保存设置失败 ' + error.error.message });
      });
    },
    // 导入参赛证配置
    importSetting(file) {
      var that = this;
      that.importLoading = true;
      api_Post_UploadFileAddHeader(this.importAction, file.file, this.$route.params.id, 'file').then(res => {
        that.$message({ type: 'success', message: '导入成功' });
        that.getSetting();
        that.importLoading = false;
      }).catch(error => {
        that.importLoading = false;
        that.$message({ type: 'error', message: '导入失败 ' + error.error || error.error.message });
      });
    },
    // 导出参赛证配置
    exportSetting() {
      var that = this;
      that.exportLoading = true;
      const id = this.$route.params.id;
      const tempUrl = `/${id}/export-entry-card-report-setting`;
      const fileName = '参赛证配置' + '.json';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName).then(res => {
        that.exportLoading = false;
        that.$message({ type: 'success', message: '导出成功' });
      }).catch(error => {
        that.exportLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.athletes {
  width: 1150px;
}
.box {
  width: 394px;
  display: inline-block;
}
.competition {
  width: 394px;
  height: 583px;
  position: relative;
  border: 1px solid #d9d9d9;
  text-align: center;
  display: inline-block;
  color: #ffffff;
  .title {
    font-size: 20px;
    font-family: 'SimHei';
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
  }
  .img_box {
    width: 100px;
    height: 126px;
    position: absolute;
    top: 125px;
    left: 28px;
  }
  .logo_box {
    width: 133px;
    height: 98px;
    position: absolute;
    top: 87px;
    left: 198px;
  }
  .type_box {
    width: 234px;
    height: 59px;
    font-size: 28px;
    font-weight: 500;
    background: #ffffff;
    color: #1f3788;
    position: absolute;
    top: 185px;
    left: 146px;
    line-height: 59px;
    padding: 0 30px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .name {
    font-size: 18px;
    font-family: 'SimHei';
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 261px;
    left: 38px;
    text-align: left;
    line-height: 32px;
  }
  .group {
    font-size: 18px;
    font-family: 'SimHei';
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 295px;
    left: 38px;
    text-align: left;
    line-height: 32px;
  }
  .project {
    font-size: 14px;
    font-family: 'SimHei';
    color: #ffffff;
    font-weight: normal;
    position: absolute;
    top: 370px;
    left: 38px;
    line-height: 30px;
    text-align: left;
  }
  .qr {
    position: absolute;
    left: 246px;
    top: 390px;
    border: 1px solid #ffffff;
  }
  .address {
    font-size: 16px;
    font-family: 'SimHei';
    color: #ffffff;
    font-weight: normal;
    width: 100%;
    position: absolute;
    top: 534px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.control {
  width: 720px;
  display: inline-block;
  vertical-align: top;
  margin-left: 30px;
  .export_box {
    background: #f0f0f0;
    border-radius: 6px;
    width: 590px
  }
  .title_name {
    color: #666666;
    line-height: 22px;
  }
  .box {
    border: 1px solid #dbdbdb;
    border-radius: 7px;
    padding: 20px;
    width: 590px;
  }
  .name_96 {
    width: 96px;
  }
}
.line_height_28 {
  line-height: 28px;
}
.upload_img {
  width: 90px;
  display: inline-block;
}
.upload_file {
  width: 52%;
  display: inline-block;
}
.el-icon-bottom:before, .el-icon-top:before, .el-icon-right:before, .el-icon-back:before {
  font-weight: bold;
  font-size: 20px;
}
</style>
